<template>
	<view class="newAddres">
		<!-- <header-box :title="pageTitle"></header-box> -->
		<view class="newAddres-main">
			<view class="newAddres-ul">				
				<view class="newAddres-li">
					<view class="newAddres-li-title"><text>收货人</text></view>
					<view class="newAddres-li-input"><input type="text" v-model.trim="addressData.name" placeholder="请输入"/></view>
				</view>
				<view class="newAddres-li">
					<view class="newAddres-li-title"><text>手机号</text></view>
					<view class="newAddres-li-input"><input type="text" v-model="addressData.mobile" placeholder="请输入"/></view>
				</view>
				<view class="newAddres-li">
					<view class="newAddres-li-title"><text>所在地区</text></view>
					<view class="newAddres-li-input_int">
						<u-picker 	
							:show="show" ref="uPicker" 
							:columns="columns" 
							@confirm="confirm" 
							@cancel="cancel"
							@change="changeHandler"
							:defaultIndex="defaultIndex">
						</u-picker>
						<text class="xuanze" @click="show = true">{{addressData.addressArea||'请选择'}}</text>
						<image class="newAddres-li-input_int-img" src="@/static/img/right-icon.png" mode=""></image>
					</view>
				</view>
				<view class="newAddres-li">
					<view class="newAddres-li-title"><text>详细地址</text></view>
					<view class="newAddres-li-input"><input type="text" v-model="addressData.addressDetail" placeholder="请输入"/></view>
				</view>
				<view class="newAddres-li newAddres-li_border" >
					<view class="newAddres-li-title"><text>是否设置为默认地址</text></view>
					<view class="newAddres-li-input">
						<u-switch class="tebie" v-model="open" activeColor="#7C43EA" @change="change"  ></u-switch>
					</view>
				</view>
			</view>
			
		</view>
		<view class="newAddres-footer">
			<view class="newAddres-footer-l" @click="deleteAddress">删除</view>
			<view class="newAddres-footer-r" @click="saveAddress">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressData:{
					name:'',				//收货人
					mobile:'',				//电话
					addressState:1,			//是否默认。1是默认。
					addressDetail:'',		//地址
					addressArea:'',			//所在地区
					addressId:'',			//修改时传入，新增时不传
					provinceName: "", //省名称
					cityName: "", //市名称
					areaName: "", //区名称
					province:'',			//省
					city:'',				//市
					area:'',				//区
				},
				pageTitle:'新增地址',
				open:true,
				mapInpuText:'请选择所在地区',
				show: false,
				provines:'',
				columns: [],
				columnData: [],
				AddressBtnFlag:true,
				type:1,
				defaultIndex:[0,0,0],
				areaList:[]
			};
		},
		onLoad(option) {
			this.getProvinces()
			console.log(option)
			if(option.type&&option.addressId){
				this.pageTitle = option.type == 1?'新增地址':'编辑地址'
				this.addressId = option.addressId
				this.type = option.type
			}

		},
		methods:{
			// 省市区获取
			getProvinces(){
				this.$api.getAreaList().then(res => {
					console.log(res)
					if(res.code==200){
						this.columns = [res.data.list]
						this.areaList = res.data.list;
						// 新增地址  需ui组件默认展示上海的所有下级地
						if (this.type != 2) {
							if (res.data.list[0].children[0].children && res.data.list[0].children[0].children.length>0) {
								this.columns = [res.data.list,res.data.list[0].children,res.data.list[0].children[0].children]
							} else {
								this.columns = [res.data.list,res.data.list[0].children]
							}
						} else {
							// 这里请求，防止省市区没有数据时地址详情请求完毕的情况
							this.getAddressDetail(this.addressId)
						}
					}
				})
			},
			
			getAddressDetail(id){
				console.log(id)
				// 获取收货地址详情
				this.$api.getAddressInfo({addressId:id}).then(res => {
					// console.log(res)
					if(res.code == 200){
						this.addressData = res.data
						this.open = res.data.addressState == 1?true:false
						let defaultIndex1 = null,defaultIndex2 = null,defaultIndex3 = null;
						for (let i = 0,len = this.areaList.length; i<len; i++) {
							if (this.areaList[i].code == this.addressData.province){
								defaultIndex1 = i
								if (this.areaList[i].children && this.areaList[i].children.length>0) {
									for (let j = 0, le = this.areaList[i].children.length; j < le; j++) {
										if (this.areaList[i].children[j].code == this.addressData.city) {
											this.columns = [this.areaList,this.areaList[i].children,this.areaList[i].children[j].children]
											defaultIndex2 = j
											if (this.areaList[i].children[j].children && this.areaList[i].children[j].children.length>0) {
												for (let k = 0, ln = this.areaList[i].children[j].children.length; k < ln; k++) {
													if (this.areaList[i].children[j].children[k].code == this.addressData.area) {
														defaultIndex3 = k												
													}
												}
											}
										}
									}
								}
							}
						}
						this.defaultIndex = [defaultIndex1,defaultIndex2,defaultIndex3]
					}
				})
			},
			
			
			change(e) {
				// console.log('change', e);
				if(e){
					this.addressData.addressState = 1;
				}else{
					this.addressData.addressState = 0;
				}
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					console.log(values[0][index],1111)
					picker.setColumnValues(1, values[0][index].children?values[0][index].children:[])

						picker.setColumnValues(2,values[1][0]&&values[1][0].children?values[1][0].children:[])
		
				}else if(columnIndex === 1){
					picker.setColumnValues(2, values[1][index].children?values[1][index].children:[])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				let addressArea = (e.value[0]?e.value[0].text:'')+''+(e.value[1]?e.value[1].text:'')+''+(e.value[2]?e.value[2].text:'')
				this.addressData.addressArea = addressArea
				this.addressData.province = e.value[0]?e.value[0].code:'';
				this.addressData.city = e.value[1]?e.value[1].code:'';
				this.addressData.area = e.value[2]?e.value[2].code:'';
				this.addressData.provinceName = e.value[0]?e.value[0].text:'';
				this.addressData.cityName = e.value[1]?e.value[1].text:'';
				this.addressData.areaName = e.value[2]?e.value[2].text:'';
				this.show = false
			},
			cancel(e){
				this.show = false
			},
			// 保存函数
			saveAddress(){
				// if(!this.AddressBtnFlag) return false
				if(!this.addressData.name){
					uni.showToast({
						title:'收货人不能为空',
						icon:'none'
					})
					return false
				}
				if(!this.addressData.mobile){
					uni.showToast({
						title:'手机号码不能为空',
						icon:'none'
					})
					return false
				}
				if (!this.phoneReg.test(this.addressData.mobile)) {
					uni.showToast({
						title:'请输入正确的手机号',
						icon:'none'
					})
					return false
				}
				if(!this.addressData.addressArea){
					uni.showToast({
						title:'请选择所在地区',
						icon:'none'
					})
					return false
				}
				if(!this.addressData.addressDetail){
					uni.showToast({
						title:'请输入详细地址',
						icon:'none'
					})
					return false
				}
				this.AddressBtnFlag=false;
				
				// 判断是新增还是编辑  尽量用数值判断，汉字判断容易出错
				if (this.type == 2) {
					this.$api.updAddress(this.addressData).then(res => {
						console.log(res)
						this.AddressBtnFlag=true;
						if(res.code==200){
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
							uni.navigateBack({
								delta:1
							})
						}
					})
				} else {
					this.$api.getRess(this.addressData).then(res => {
						console.log(res)
						this.AddressBtnFlag=true;
						if(res.code==200){
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
							uni.navigateBack({
								delta:1
							})
						}
					})
				}
			},
			
			// 删除按钮
			deleteAddress(){
				if(this.type !=2){
					uni.showToast({
						title:'新增地址，不能删除哦',
						icon:'none'
					})
					return false
				}
				this.$api.getDelAddressInfo({addressId:this.addressData.addressId}).then(res =>{
					console.log(res)
					this.AddressBtnFlag=true;
					if(res.code==200){
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						uni.navigateBack({
							delta:1
						})
					}
				})
			}
		},

	}
</script>

<style lang="less">
	.newAddres{
		width: 100%;
		min-height: 100vh;
		background: #16181D;
		display: flow-root;
	}
	.newAddres-main{
		width: 100%;
		min-height: 100%;
		margin: 0 auto;
		.newAddres-ul{
			width: 654rpx;
			margin: 0 auto;
			min-height: 100%;
			.newAddres-li{
				height: 192rpx;
				// height: 112rpx;
				width: 100%;
				padding: 56rpx 0 24rpx;
				border-bottom: 1px solid #262A34;
				.newAddres-li-title{
					height: 32rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC, '微软雅黑';
					font-weight: 400;
					color: #5E6272;
					line-height: 32rpx;
					margin-bottom: 30rpx;
				}
				.newAddres-li-input{
					width: 100%;
					height: 48rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #5E6272;
					line-height: 48rpx;
				}
			}
		}
	}
	.uni-input-placeholder.input-placeholder{
		color: #5E6272;
	}
	// 所在地区
	.newAddres-li-input_int{
		line-height: 48rpx;
		width: 630rpx;
		height: 48rpx;
		display: flex;
		justify-content: space-between;
		.xuanze{
			 display: block;
			 text-align: left;
			 padding: 0;
			 width: 598rpx;
			 height: 48rpx;
			 font-size: 32rpx;
			 font-family: PingFangSC-Semibold, PingFang SC;
			 font-weight: 600;
			 color: #5E6272;
			 line-height: 48rpx;
			 background: none;
			 border: none;
		}
		.newAddres-li-input_int-img{
			width: 32rpx;
			height: 32rpx;
			margin-top: 8rpx;
		}
	}
	// 开关按钮
	.newAddres-li_border{
		border: none !important;
	}
	//底部
	 .newAddres-footer{
		 display: flex;
		 // position: fixed;
		 // left: 0;
		 // right: 0;
		 // bottom: 40rpx;
		 padding-top: 40rpx;
		 width: 688rpx;
		 min-height: 88rpx;
		 margin: 0 auto;
		 padding-bottom: 80rpx;
		.newAddres-footer-l{
			 width: 184rpx;
			 height: 88rpx;
			 text-align: center;
			 line-height: 88rpx;
			 border-radius: 23px;
			 border: 1px solid #5E6272;
			 font-size: 32rpx;
			 font-family: PingFangSC-Medium, PingFang SC,'微软雅黑';
			 font-weight: 500;
			 color: #5E6272;
			 margin-right: 16rpx;
		 }
		 .newAddres-footer-r{
		 	 width: 486rpx;
		 	 height: 88rpx;
		 	 text-align: center;
		 	 line-height: 88rpx;
		 	 border-radius: 23px;
		 	 font-size: 32rpx;
		 	 font-family: PingFangSC-Medium, PingFang SC,'微软雅黑';
		 	 font-weight: 500;
		 	 color: #FFFFFF;
			 background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
		  }
	 }
</style>
